import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 创建拉伸网格模型
 *    二维 shape 通过拉伸扫描，可以生成三维模型
 */
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(100, 0);
shape.lineTo(100, 100);
shape.lineTo(0, 100);
shape.lineTo(0, 0);
const shapeExtrudeGeo = new THREE.ExtrudeGeometry(shape, { // 拉伸平面构建模型
  /**
   *  amount	拉伸长度，默认100
      bevelEnabled	是否使用倒角	
      bevelSegments	倒角细分数，默认3
      bevelThickness	倒角尺寸(经向)
      curveSegments	拉伸轮廓细分数
      steps	拉伸/扫描方向细分数
      extrudePath	扫描路径THREE.CurvePath，默认Z轴方向
      material	前后面材质索引号
      extrudeMaterial	拉伸面、倒角面材质索引号
      bevelSize	倒角尺寸(拉伸方向)
   */
  amount: 200,
  bevelEnabled: false
});

const mat = new THREE.PointsMaterial({
  color: 0x0000ff,
  size: 5
});
const meshShape = new THREE.Points(shapeExtrudeGeo, mat);
scene.add(meshShape);

// 还可以通过平面沿着轨道进行扫码构建模型
const shape1 = new THREE.Shape();
shape1.moveTo(0, 0);
shape1.lineTo(10, 0);
shape1.lineTo(10, 10);
shape1.lineTo(0, 10);
shape1.lineTo(0, 0);
const scanCurve = new THREE.SplineCurve3([
  new THREE.Vector3( -10, -50, -50 ),
  new THREE.Vector3( 10, 0, 0 ),
  new THREE.Vector3( 8, 50, 50 ),
  new THREE.Vector3( -5, 0, 100)
]);
const shapeScanGeo = new THREE.ExtrudeGeometry(shape1, { // 通过拉伸构建
  extrudePath: scanCurve,
  bevelEnabled:false,
  steps: 50
});
const shapeScanMat = new THREE.MeshBasicMaterial({
  color: 0x00ffff,
  side: THREE.DoubleSide,
  wireframe: true
});
const meshScanShape = new THREE.Mesh(shapeScanGeo, shapeScanMat);
scene.add(meshScanShape);

const axesH = new THREE.AxesHelper(200);
scene.add(axesH);
const k = innerWidth / innerHeight,
      s = 100,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
})();